<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li><router-link to="/foreign">合作</router-link></li>
        <li><router-link to="/domestic">国内合作</router-link></li>
      </ol>
    </header>
    <div class="domesticContent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="chart">
            <ul>
              <li>
                <a href="#">全国合作医院饼图展示</a>
                <ul>
                  <li>
                    <div class="myEchart">
                      <div ref="map" style="width:100%;height:100%;"></div>
                      <!--饼状图-->
                      <!-- <div
                        class="pieEchart"
                        id="main"
                        style="width:100%;height:500px;"
                      ></div> -->
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/foreign"><span>德国合作</span></router-link>
                </li>
                <hr>
                <li><router-link to="/domestic">国内合作</router-link></li>
                <hr>
                <li><router-link to="/cooperate">合作伙伴</router-link></li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top: 1px solid #ccc"
                width="100%"
                color="#ccc"
                size="1"
              />
                <img src="../assets/code.jpg" alt="" />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 <script>
 import echarts from 'echarts'
 export default{
   data(){
     return{

     }
   },
   mouted(){

   },
   methods:{

   }
 }
 </script>
//     import echarts from "echarts";
//     export default {
//         data() {
//             return {
//                 charts: "",
//                 opinion: [
//                     "北京市",
//                     "云南省",
//                     "江西省",
//                     "广东省",
//                     "河北省",
//                     "四川省",
//                     "海南省",
//                     "山西省",
//                     "陕西省",
//                     "辽宁省"
//                 ],
//                 type: "pie",
//                 opinionData: [{
//                     value: 7,
//                     name: "北京市"
//                 }, {
//                     value: 5,
//                     name: "云南省"
//                 }, {
//                     value: 2,
//                     name: "江西省"
//                 }, {
//                     value: 4,
//                     name: "广东省"
//                 }, {
//                     value: 2,
//                     name: "河北省"
//                 }, {
//                     value: 1,
//                     name: "四川省"
//                 }, {
//                     value: 1,
//                     name: "海南省"
//                 }, {
//                     value: 2,
//                     name: "山西省"
//                 }, {
//                     value: 3,
//                     name: "陕西省"
//                 }, {
//                     value: 2,
//                     name: "辽宁省"
//                 }]
//             };
//         },
//         methods: {
//             drawPie(id) {
//                 this.charts = echarts.init(document.getElementById(id));
//                 this.charts.setOption({
//                     backgroundColor: "#fff",
//                     color: [
//                         "#c13831",
//                         "#2f4553",
//                         "#61a0a9",
//                         "#d7f0e3",
//                         "#3297db",
//                         "#2f4553",
//                         "#75e57c",
//                         "#d9d98b",
//                         "#e09370",
//                         "#ce8520"
//                     ],
//                     /*饼状图的颜色*/
//                     tooltip: {
//                         trigger: "item",
//                         formatter: "{b}({d}%)"
//                             /*饼状图触碰之后显示的注释文字*/
//                     },
//                     legend: {
//                         left: "center",
//                         /*标签文字排成一行*/
//                         y: "bottom",
//                         /*在垂直方向上的底部*/
//                         data: this.opinion
//                     },
//                     series: [{
//                         type: "pie", //饼状图
//                         center: ["50%", "50%"], //显示位置
//                         name: "",
//                         type: "pie",
//                         radius: ["0%", "60%"],
//                         /*空心圆的占比*/
//                         itemStyle: {
//                             emphasis: {
//                                 shadowBlur: 10,
//                                 shadowOffsetX: 0,
//                                 shadowColor: "rgba(0, 0, 0, 0.5)"
//                             },
//                             normal: {
//                                 borderWidth: 5,
//                                 /*隔开的白色边界*/
//                                 borderColor: "#fff"
//                                     /*border*/
//                                     // labelLine :{show:true}
//                             }
//                         },
//                         avoidLabelOverlap: false,
//                         label: {
//                             normal: {
//                                 show: false,
//                                 // position:'inner',
//                                 textStyle: {
//                                     fontWeight: 200,
//                                     fontSize: 20 //文字的字体大小
//                                 }
//                                 // formatter: '{d}%',/*饼状图内显示百分比*/
//                                 // data:['40%','60%'],
//                             },

//                             emphasis: {
//                                 show: false
//                                     /*空心文字出现*/
//                             }
//                         },
//                         labelLine: {
//                             normal: {
//                                 lineStyle: {
//                                     color: "#000"
//                                 }
//                             }
//                         },
//                         data: this.opinionData
//                     }]
//                 });
//             }
//         },
//         //调用
//         mounted() {
//             this.$nextTick(function() {
//                 this.drawPie("main");
//             });
//         }
//     };
// </script>
<style>
    .dom .esticContent {
        width: 100%;
    }
    
    .pieEchart {
        width: 12.5 rem;
        margin: 0;
    }
     /* 右边内容开始 */
  .guide {
  width: 220%;
}
.guideTop {
  width:100%;
  background-color:#005051;;
  box-sizing: border-box;
}

.guideTop ul {
  list-style-type: none;
  box-sizing:border-box;
}
.guideTop ul li{
  padding:.625rem /* 10/16 */;
}
.guideTop ul hr {
  padding-left:20px;
  padding-right:20px;
  border:.0625rem /* 1/16 */ solid #fff;
  margin:0;
}

.guideTop ul li a {
  padding:.625rem /* 10/16 */;
  color: #fff;
  font-size: 16px;
}
.guideTip{
  margin-top:1.25rem /* 20/16 */;
}
.guideTip .connect_h {
  font-size: 28px;
  text-indent: 0;
  margin-bottom:1.875rem /* 30/16 */;
}
.guideTip hr{
  margin:0;
  padding:0;
}

.guideTip div {
  white-space: nowrap;
  margin:1.25rem /* 20/16 */ 0;
}

.guideTip div span {
  word-break: break-all;
}
  /* 右边内容结束 */
 @media screen and (min-width: 992px) {
    /* 右边内容开始 */
  .guideTop {
    background-color: #f8f8f8;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTop ul {
    margin: 0;
    padding-bottom: 0;
    list-style-type: none;
    box-sizing: border-box;
  }
  .guideTop ul hr {
    padding: 0;
    margin: 0;
    height: 2px;
    margin: 0;
  }
  .guideTop ul li {
    margin-left: 0;
    padding-bottom: 0;
    list-style-type: none;
    padding: 0;
  }
  .guideTop ul li a {
    padding: 1.25rem /* 20/16 */;
    position: relative;
    color: #fff;
    background-color: #005051;
    font-weight: 600;
    display: block;
  }
  .guideTip .connect_h {
    font-size: 28px;
    text-indent: 0;
  }

  .guideTip div {
    height: 30px;
  }
  .guideTip hr {
    margin: 0 0 1.875rem /* 30/16 */;
    padding: 0;
  }
  .guideTip img {
    display: inline;
    border: 1px solid #ccc;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTip p {
    text-align: left;
  }
  .guideTop div span {
    word-break: break-all;
    word-wrap: break-word;
  }
  /* 右边内容结束 */
  }
</style>